<template>
  <div class="app-container">
    <el-row>
      <el-col :span="6">
        <el-tree
          :data="data"
          :props="defaultProps"
          node-key="id"
          default-expand-all
          :expand-on-click-node="false"
          :render-content="renderContent"
          :highlight-current="true"
          @node-click="handleNodeClick"
        />
      </el-col>
      <el-col v-show="searchForm.orgId" :span="18">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>{{ orgName }}</span>
          </div>
          <data-table
            ref="customTable"
            :request="findOrgUserPage"
            :search-form="searchForm"
          >
            <template slot="search">
              <el-form-item prop="agentId">
                <el-input v-model="searchForm.agentId" type="text" placeholder="帐号" />
              </el-form-item>
              <el-form-item prop="name">
                <el-input v-model="searchForm.name" type="text" placeholder="姓名" />
              </el-form-item>
            </template>
            <template slot="function">
              <el-button v-permission="['function:admin:org:user:manage']" type="primary" icon="el-icon-s-tools" @click="handleAdd">管理员工</el-button>
            </template>
            <template slot="tableColumns">
              <el-table-column prop="id" label="ID" :show-overflow-tooltip="true" />
              <el-table-column prop="agentId" label="帐号" />
              <el-table-column prop="state" label="状态">
                <template slot-scope="scope">
                  <el-tag :type="scope.row.state === 1 ? 'success' : 'danger'">
                    {{ scope.row.state === 1 ? '启用' : '禁用' }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="name" label="姓名" />
              <el-table-column prop="phoneNo" label="电话号码" />
              <el-table-column prop="email" label="邮箱" />
              <el-table-column prop="gender" label="性别">
                <template slot-scope="scope">
                  {{ scope.row.gender === 1 ? '男' : scope.row.gender === 2 ? '女' : '未知' }}
                </template>
              </el-table-column>
              <el-table-column prop="createTime" label="创建时间" />
              <el-table-column prop="action" label="操作">
                <template slot-scope="scope">
                  <el-button-group>
                    <el-button
                      v-permission="['function:admin:org:user:remove']"
                      type="danger"
                      icon="el-icon-delete"
                      circle
                      @click.native.prevent="remove(scope.$index, scope.row)"
                    />
                  </el-button-group>
                </template>
              </el-table-column>
            </template>
          </data-table>
        </el-card>
      </el-col>
    </el-row>
    <OrgUserRel
      ref="customForm"
      :org-id="searchForm.orgId"
    />
  </div>
</template>
<script>
import DataTable from '@/components/datatable/data-table';
import OrgUserRel from '@/components/admin/org-user-rel';
import { trees } from '@/api/admin/org';
import { remove, findOrgUserPage } from '@/api/admin/org-user';

export default {
  components: {
    DataTable,
    OrgUserRel
  },
  data() {
    return {
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      data: null,
      orgName: '请先从左侧部门树点选部门',
      searchForm: {
        orgId: '',
        agentId: null,
        name: null
      },
      customFormInitOption: {
        title: '',
        action: '',
        showModal: false
      }
    };
  },
  computed: {
    id() {
      return this.$route.params.id;
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.getDepartmentData();
    });
  },
  methods: {
    findOrgUserPage,
    handleNodeClick(data, node) {
      this.orgName = null;
      this.searchForm.orgId = data.id;
      this.$refs.customForm.searchForm.orgId = data.id;
      console.log(this.searchForm.orgId);
      this.$refs.customTable.query();
      this.handleOrgName(node);
    },
    getDepartmentData() {
      trees(this.id).then(response => {
        const result = response.data;
        if (result.code === 0) {
          this.data = result.data;
        } else {
          this.$notify.error({
            title: result.code,
            message: result.msg
          });
        }
      });
    },
    renderContent(h, { node, data, store }) {
      let iconName = 'company';
      if (node.data.pid != null) {
        iconName = 'dept';
      }
      return (
        <span class='custom-tree-node'>
          <span>
            <svg-icon icon-class={iconName} />
          </span>
          <span>{node.label}</span>
        </span>);
    },
    remove(index, row) {
      this.$confirm('将从 【' + this.orgName + '】部门移除【' + row.agentId + '】员工？', '请确认', {
        type: 'warning'
      }).then(() => {
        remove(row.relId).then(response => {
          const result = response.data;
          if (result.code === 0) {
            this.$notify({
              title: '成功',
              type: 'success'
            });
            this.$refs.customTable.query();
          } else {
            this.$notify({
              title: result.code,
              message: result.msg,
              type: 'error'
            });
          }
          this.getDepartmentData();
        });
      }).catch(() => {});
    },
    handleAdd() {
      if (this.searchForm.orgId === '') {
        this.$alert('请在左侧先选择部门', '注意', {
          confirmButtonText: '确定'
        });
      } else {
        this.$refs.customForm.drawer.title = this.orgName;
        this.$refs.customForm.drawer.showModal = true;
        // this.customFormInitOption.title = this.orgName;
        // this.customFormInitOption.showModal = true;
      }
    },
    handleOrgName(node) {
      // 根节点node.level === 1
      if (node.level !== 1) {
        this.handleOrgName(node.parent);
      }
      const currentOrgName = this.orgName;
      if (node.level === 1) {
        this.orgName = node.data.label;
      } else {
        this.orgName = currentOrgName + ' >> ' + node.data.label;
      }
    }
  }
};
</script>
